<template>
  <!-- 搜索订单页头组件 -->
  <div class="header_box">
    <div class="h_left">
      <van-icon name="arrow-left"
                @click="back" />
    </div>
    <div class="h_center">
      <van-field v-model="search"
                 placeholder="请输入手机尾号/订单号/商品名称" />
    </div>
    <div class="h_right"
         @click="searchHandle">
      搜索
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      search: ''
    }
  },
  props: {},
  methods: {
    back () {
      this.$router.go(-1)
    },
    // 搜索
    searchHandle () {
      this.$bus.$emit('searchValue', this.search)
      // this.$router.push('/')
    }
  }
}
</script>
<style scoped>
.header_box {
  width: 100%;
  background-color: rgba(255, 110, 83, 1);
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 50px;
  font-size: 16px;
  color: aliceblue;
  position: relative;
}
.h_center {
  width: 70%;
}
.van-cell {
  height: 40px;
  border-radius: 20px;
}
</style>
